<template>
  <div>
    <h1>{{ msg }}</h1>
    <br>
    <br>
    <p>
      这是一个姓名为{{ userinfo.name }}年纪{{ userinfo.age }}的小伙子
    </p>

    <br>
    <p>绑定html：<span v-html="h2"></span></p>
    <br><br>
    <h3>绑定属性</h3>
    <br>
    <img :src="logoSrc" alt="这是一个GIF">
    <br>
    <img v-bind:src="logoSrc" alt="这是一个GIF">

    <br>
    <h3>绑定动态属性</h3>
    <br>
    <a v-bind:[myHref] ="'https://www.baidu.com'">跳转百度</a>

    <br>

    <a :[myHref]="myLink">跳转itying</a>

    <br>
    <h3>循环遍历数组</h3>
    <ul>
      <li v-for="(item, index) in list1" :key="index">
          {{ item }}--{{ index }}
      </li>
    </ul>
    
    <ul>
      <li v-for="(item, index) in list2" :key="index">
         {{ item.title }}--{{ index }}
      </li>
    </ul>

    
     <ul>
      <li v-for="(item, index) in list3" :key="index">
         {{ item.cate }}
         <ol>
          <li v-for="(i, k) in item.list" :key="k">
            {{ i.title }}
          </li>
         </ol>
      </li>
    </ul>
    <br>
    <ol>
      <li v-for="(value, key, index) in myObject" :key="index">
       {{ key }} : {{ value }}
      </li>
    </ol>

  </div>
</template>

<script>
export default {
  data(){
    return {
      msg: "你好vue",
      userinfo: {
        "name":"张三",
        "age":18
      },
      h2: "<h2>你好vue,我是一个html标签</h2>",
      logoSrc: "https://www.itying.com/themes/itying/images/logo.gif",
      myHref: "href",
      myLink: "https://itying.com",
      list1: ["李明" ,"刘添", "张红"],
      list2: [
        {
          "title": "新闻111"
        },
        {
          "title": "新闻222"
        },
        {
          "title": "新闻333"
        }
      ],
      list3: [
        {
          "cate": "国内新闻",
          "list": [
            {
              "title": "新闻111"
            },
            {
              "title": "新闻222"
            },
            {
              "title": "新闻333"
            }
          ]
        },
        {
          "cate": "国际新闻",
          "list": [
            {
              "title": "新闻555"
            },
            {
              "title": "新闻666"
            },
            {
              "title": "新闻777"
            }
          ]
        },
        {
          "cate": "宇宙新闻",
          "list": [
            {
              "title": "宇宙新闻111"
            },
            {
              "title": "宇宙新闻222"
            },
            {
              "title": "宇宙新闻333"
            }
          ]
        }
      ],
      myObject: {
        "title": "标题",
        "subTitle": "副标题",
        "content": "3月13日，中共中央政治局常委、国务院总理李强在北京调研，并来到百度公司亦庄办公区Apollo Park，了解大模型产品研发应用和国产化人工智能创新联合体建设情况。百度创始人、董事长兼首席执行官李彦宏陪同。"
      }
    }
  }
}
</script>
 

<style>
h1 {
  text-align:  center;
  color: #666
}
</style>